<template>
	<view>
		<view class="title">工单信息</view>
		<view class="nav">
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">工单编号：</text></view>
				<view class="box2"><text selectable="true">{{ list.orderNum }}</text></view>
			</view>
			<!-- <view class="uni-flex uni-btm2">
				<view class="box1">工单状态：</view>
				<view class="box2">{{list.statusName}}</view>
			</view> -->
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">来电号码：</text></view>
				<view class="box2 uni-btn" @click="callPhont(list.comingTel)">
					<view><text selectable="true">{{list.comingTel}}</text></view>
					<image style="width: 25px;height: 25px;" src="../../../static/a14.png" mode=""></image>
				</view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">工单来源：</text></view>
				<view class="box2"><text selectable="true">{{ list.orderSource }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">紧急程度：</text></view>
				<view class="box2"><text selectable="true">{{ list.urgency }}</text></view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">创建时间：</text></view>
				<view class="box2"><text selectable="true">{{ list.orderCreateTime }}</text></view>
			</view>

			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">工单类型：</text></view>
				<view class="box2"><text selectable="true">{{ list.orderType }}</text></view>
			</view>
			<!-- <view class="uni-flex uni-btm2">
				<view class="box1">业务类型：</view>
				<view class="box2">{{ list.busiType }}</view>
			</view> -->
			<!-- <view class="uni-flex uni-btm">
				<view class="box1">到期时间：</view>
				<view class="box2">{{ list.expireTime }}</view>
			</view> -->
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">是否公开：</text></view>
				<view class="box2"><text selectable="true">{{ list.isPublic }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">归属地：</text></view>
				<view class="box2"><text selectable="true">{{ list.location }}</text></view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">派单来源：</text></view>
				<view class="box2"><text selectable="true">{{ list.dispatchSource }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">诉求情感：</text></view>
				<view class="box2"><text selectable="true">{{ list.appealEmotion }}</text></view>
			</view>
			
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">到期时间：</text></view>
				<view class="box2"><text selectable="true">{{ list.expireTime }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">工单状态：</text></view>
				<view class="box2"><text selectable="true">{{ list.oneFiveOrderStatus }}</text></view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">业务类型：</text></view>
				<view class="box2"><text selectable="true">{{ list.busiType }}</text></view>
			</view>
			
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">事发时间：</text></view>
				<view class="box2"><text selectable="true">{{ list.appelalAddress }}</text></view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">诉求地址：</text></view>
				<view class="box2"><text selectable="true">{{ list.appelalAddress }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">工单标题：</text></view>
				<view class="box2"><text selectable="true">{{ list.orderTitle }}</text></view>
			</view>

			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">诉求目的：</text></view>
				<view class="box2"><text selectable="true">{{ list.appeals }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">内容描述：</text></view>
				<view class="box2"><text selectable="true">{{ list.contentDesc }}</text></view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">附件：</text></view>
				<view class="box2"><text selectable="true">{{ list.fuJian }}</text></view>
			</view>
		</view>

		<view class="title"><text selectable="true">催办信息</text></view>
		<view class="nav">
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">添加时间：</text></view>
				<view class="box2"><text selectable="true">{{ list.addTime }}</text></view>
			</view>
			<view class="uni-flex uni-btm2">
				<view class="box1"><text selectable="true">添加人员：</text></view>
				<view class="box2"><text selectable="true">{{ list.addUserName }}</text></view>
			</view>
			<view class="uni-flex uni-btm">
				<view class="box1"><text selectable="true">添加内容：</text></view>
				<view class="box2"><text selectable="true">{{ list.addContent }}</text></view>
			</view>
		</view>
		
		<view v-show="list.waterDisposer">
			<view class="title"><text selectable="true">水务办理信息</text></view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">处理意见：</text></view>
					<view class="box2"><text selectable="true">{{list.waterOpinion}}</text></view>
				</view>
				<view class="uni-flex uni-btm2" v-if="status==19">
					<view class="box1"><text selectable="true">驳回原因：</text></view>
					<view class="box2"><text selectable="true">{{list.waterRejectReason}}</text></view>
				</view>
			</view>
		</view>
		
		<view v-show="list.officeDisposer">
			<view class="title"><text selectable="true">办公室办理信息</text></view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">工单编号：</text></view>
					<view class="box2"><text selectable="true">{{list.orderNo}}</text></view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1"><text selectable="true">登录员：</text></view>
					<view class="box2"><text selectable="true">{{list.officeDisposerName}}</text></view>
				</view>
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">接受时间：</text></view>
					<view class="box2"><text selectable="true">{{list.officeTime}}</text></view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1"><text selectable="true">反映类别：</text></view>
					<view class="box2"><text selectable="true">{{list.reflectCategoryName}}</text></view>
				</view>
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">受理部门：</text></view>
					<view class="box2"><text selectable="true">{{list.officeDeptName}}</text></view>
				</view>
				
				<view class="uni-flex uni-btm2" v-if="list.endDept">
					<view class="box1"><text selectable="true">承办单位：</text></view>
					<view class="box2"><text selectable="true">{{list.endDept}}</text></view>
				</view>
				
				<view class="uni-flex uni-btm" v-if="list.endName">
					<view class="box1"><text selectable="true">承办人：</text></view>
					<view class="box2"><text selectable="true">{{list.endName}}</text></view>
				</view>
				
				<view class="uni-flex uni-btm2" v-if="list.endPhone">
					<view class="box1"><text selectable="true">承办人号码：</text></view>
					<view class="box2"><text selectable="true">{{list.endPhone}}</text></view>
				</view>
				
				<view class="uni-flex uni-btm" :class="!list.endPhone?'uni-btm2':''">
					<view class="box1"><text selectable="true">处理意见：</text></view>
					<view class="box2"><text selectable="true">{{list.handleOpinion}}</text></view>
				</view>
				<!-- <view class="uni-flex uni-btm">
					<view class="box1">附件上传：</view>
					<view class="box2">{{list.officeFu}}</view>
				</view> -->
				<view class="uni-flex uni-btm2" v-show="status==18">
					<view class="box1"><text selectable="true">驳回原因：</text></view>
					<view class="box2"><text selectable="true">{{list.officeRejectReason}}</text></view>
				</view>
			</view>
		</view>
		
		<view v-show="list.handleDisposer">
			<view class="title"><text selectable="true">处理部门办理信息</text></view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">登录员：</text></view>
					<view class="box2"><text selectable="true">{{list.userName }}</text></view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1"><text selectable="true">接受时间：</text></view>
					<view class="box2"><text selectable="true">{{list.userTime}}</text></view>
				</view>
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">是否签收：</text></view>
					<view class="box2"><text selectable="true">{{list.isReceiveName}}</text></view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1"><text selectable="true">签收时间：</text></view>
					<view class="box2"><text selectable="true">{{list.recevieTime}}</text></view>
				</view>
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">处理结果：</text></view>
					<view class="box2"><text selectable="true">{{list.handleResultDesc}}</text></view>
				</view>
				<!-- <view class="uni-flex uni-btm2">
					<view class="box1">附件上传：</view>
					<view class="box2">{{list.handleFu}}</view>
				</view> -->
			</view>
		</view>

		<view v-show="status == 6 || status == 12">
			<view class="title"><text selectable="true">延期信息</text></view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">延期时长：</text></view>
					<view class="box2"><text selectable="true">{{ list.delayApplyLength }} (小时)</text></view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1"><text selectable="true">原始延期：</text></view>
					<view class="box2"><text selectable="true">{{ list.oldDelayTime }}</text></view>
				</view>
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">申请理由：</text></view>
					<view class="box2"><text selectable="true">{{ list.delayRemark }}</text></view>
				</view>
				<!-- <view class="uni-flex uni-btm2">
					<view class="box1">附件：</view>
					<view class="box2">{{ list.oneDelayFuJian }}</view>
					<image v-show="list.oneDelayFuJian" :src="list.oneDelayFuJian" mode=""></image>
				</view> -->
			</view>
		</view>

		<view v-show="status == 15 || status == 16">
			<view class="title"><text selectable="true">退回信息</text></view>
			<view class="nav">
				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">退回原因：</text></view>
					<view class="box2"><text selectable="true">{{ list.rebackRemark }}</text></view>
				</view>
				<view class="uni-flex uni-btm2">
					<view class="box1"><text selectable="true">退单人：</text></view>
					<view class="box2"><text selectable="true">{{ list.rebackUser }}</text></view>
				</view>

				<view class="uni-flex uni-btm">
					<view class="box1"><text selectable="true">退单时间：</text></view>
					<view class="box2"><text selectable="true">{{ list.rebackTime }}</text></view>
				</view>
				<!-- <view class="uni-flex uni-btm2">
					<view class="box1">附件：</view>
					<view class="box2">{{ list.rebackFu }}</view>
				</view> -->
			</view>
		</view>
		
		<view
			class="uni-box"
			v-show="status == 0 || status == 1 || status == 3 || status == 4 || status == 8 || status == 9 || status == 15 || status == 16 || status == 19 || status == 20"
		>
			<view class="aaa" @click="baocun()">保存</view>
			<view class="bbb" @click="paifa()">派发</view>
			<view class="ccc" @click="wanjie()">完结</view>
			<view class="ddd" @click="yanqi()">延期</view>
			<view class="eee" @click="tuihui()">退回</view>
		</view>

		<view class="uni-box" v-show="status == 10 || status == 13 || status == 14 || status == 18">
			<view class="aaa" @click="baocun()">保存</view>
			<view class="ccc" @click="wanjie()">完结</view>
			<view class="ddd" @click="yanqi()">延期</view>
			<view class="eee" @click="tuihui()">退回</view>
		</view>
		<view class="uni-box" v-show="status == 7 || status == 11">
			<view class="aaa" @click="bohui()">驳回</view>
			<view class="ccc" @click="wanjie()">完结</view>
		</view>
		<view class="uni-box" v-show="status == 6 || status == 12">
			<view class="ddd" @click="yanqi()">延期</view>
			<view class="aaa" @click="postpone('agreeDelay')">同意延期</view>
			<view class="ccc" @click="postpone('disagreeDelay')">不同意延期</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderID: '',
			list: [],
			status: '', //当前订单的状态
			deptKey: '', //当前身份
			comingTel:'',//来电号码
		};
	},

	onLoad(e) {
		this.orderID = e.id;
		this.my_detail();
	},
	methods: {
		// 拨打电话
		callPhont(phone) {
			if (!phone) {
				uni.showToast({
					title: '号码错误',
					icon: 'none'
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: phone,
				success: res => {
					console.log('调用成功!');
				},
				fail: res => {
					console.log('调用失败!');
				}
			});
		},
		// 将json数组里的null改成空
		null2str(data) {
			for (let x in data) {
				if (data[x] === null || data[x] === undefined || data[x] === 'undefined') {
					// 如果是null 把直接内容转为 ''
					data[x] = '';
				} else {
					if (Array.isArray(data[x])) {
						// 是数组遍历数组 递归继续处理
						data[x] = data[x].map(z => {
							return null2str(z);
						});
					}
					if (typeof data[x] === 'object') {
						// 是json 递归继续处理
						data[x] = null2str(data[x]);
					}
				}
			}
			return data;
		},
		my_detail() {
			//工单详情
			var that = this;
			uni.request({
				url: '/app/wechatApi/wechatOneFiveOrder/getWechatOneFiveOrderDetail',
				method: 'GET',
				data: {
					orderId: that.orderID,
					openid: uni.getStorageSync('openid')
				},
				header: {
					'Content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					if (res.data.code === 200) {
						// console.log(res)
						that.list = that.null2str(res.data.data);
						// console.log(this.list)
						// console.log(this.list.orderNo,'==========')
						that.status = res.data.data.status; //状态
						that.deptKey = res.data.data.deptKey; //身份
						that.comingTel = res.data.data.comingTel; //来电号码
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				},
				error: e => {
					console.log(e);
				}
			});
		},

		// 保存
		baocun() {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			uni.navigateTo({
				url:'/pages/123List/dispose/baocun/baocun?list='+JSON.stringify(list)+'&deptKey='+this.deptKey+'&orderID=' +this.orderID
			});
		},
		// 派发
		paifa() {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			if (this.deptKey == 'shuiwu' || this.deptKey == 'liqun' || this.deptKey == 'kuncheng' || this.deptKey == 'wushui' || this.deptKey == 'zilaishui') {
				uni.navigateTo({
					url:'/pages/123List/dispose/paifa/paifa?list='+JSON.stringify(list)+'&deptKey='+this.deptKey+'&orderID=' +this.orderID
				});
			}
		},
		// 完结
		wanjie() {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			uni.navigateTo({
				url: '/pages/123List/dispose/wanjie/wanjie?orderID=' + this.orderID
				+ '&deptKey=' + this.deptKey
				+ '&list=' + JSON.stringify(list)+'&comingTel='+this.comingTel
			});
		},
		// 延期
		yanqi() {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			if (!list.oldDelayTime) {
				list.oldDelayTime = '';
			}else{
				list.oldDelayTime = list.expireTime;
			}
			uni.navigateTo({
				url: '/pages/123List/dispose/yanqi/yanqi?orderID=' + this.orderID 
				+ '&list=' + JSON.stringify(list)
			});
		},
		// 退回
		tuihui() {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			list.rebackUser=list.userName;
			list.rebackTime=list.userTime;
			uni.navigateTo({
				url: '/pages/123List/dispose/tuihui/tuihui?orderID=' + this.orderID
				+ '&deptKey=' + this.deptKey
				+ '&list=' + JSON.stringify(list)
			});
		},
		// 同意延期
		postpone(name) {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			if (this.deptKey == 'shuiwu' || this.deptKey == 'liqun' || this.deptKey == 'kuncheng' || this.deptKey == 'wushui' || this.deptKey == 'zilaishui') {
				uni.navigateTo({
					url: '/pages/123List/dispose/postpone/postpone?orderID=' + this.orderID
					+ '&deptKey=' + this.deptKey
					+ '&list=' + JSON.stringify(list)
					+ '&type=' + name
				});
			}
		},
		
		// 驳回
		bohui() {
			let list = this.list;
			list.contentDesc = '';
			list.appeals = '';
			if (this.deptKey == 'shuiwu' || this.deptKey == 'liqun' || this.deptKey == 'kuncheng' || this.deptKey == 'wushui' || this.deptKey == 'zilaishui') {
				uni.navigateTo({
					url: '/pages/123List/dispose/bohui/bohui?orderID=' + this.orderID + '&deptKey=' + this.deptKey+ '&list=' + JSON.stringify(list)
				});
			}
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
}
.title {
	padding-left: 20upx;
	padding: 20upx;
	color: #007aff;
}
.nav {
	background: #ffffff;
	border-top: none;
}

.uni-btm {
	white-space: normal;
	padding: 20upx;
	background: #8ef7c9;
	color: #000000;
	opacity: 0.9;
	border-bottom: 1px solid #ffffff;
}

.uni-btm2 {
	white-space: normal;
	padding: 20upx;
	background: #eeeeee;
	color: #000000;
	opacity: 0.9;
	border-bottom: 1px solid #ffffff;
}

.uni-height {
	height: 150upx;
}
.box1 {
	width: 150upx;
	white-space: nowrap;
}
.box2 {
	width: 580upx;
}
image {
	width: 180upx;
	height: 180upx;
}
.uni-none {
	border: none;
}
.box3 {
	color: #bdbdbd;
	height: 160upx;
	width: 580upx;
}

/* 按钮 */
.uni-box {
	display: flex;
	justify-content: space-around;
	align-content: center;
	text-align: center;
	color: #ffffff;
	width: 100%;
	margin: 50upx 0;
}
.uni-box view {
	padding: 5upx 35upx;
	border-radius: 5upx;
}
.aaa {
	background: #4a98ee;
}
.bbb {
	background: #48e6e7;
}
.ccc {
	background: #87b249;
}
.ddd {
	background: #dbb748;
}
.eee {
	background: #ff5c31;
}
</style>
